<template>
  <div class="box1" @click="large(src)" v-bind:style="{ width: width, height: height, top: top, left: left }" >
    <div
      class="imgBox" 
    >
      <div class="cover">
        <p>查看大图</p>
      </div>
      <img :src="src" alt="" />
    </div>
    <div class="motai" ref="motai" @click="disappear">
      <img :src="src" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src1: "",
      status: "block",
    };
  },

  methods: {
    large(src) {
      this.src1 = src;
      this.$refs.motai.style.display = this.status;
      this.status = "block";
    },
    disappear() {
      this.status = "none";
      this.$refs.motai.style.display = this.status;
    },
  },
  props: {
    src: {
      type: String,
      required: true,
    },
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    top: {
      type: Number,
      required: true,
    },
    left:{
      type: Number,
      required: true,
    }
  },
};
</script>

<style scoped lang="scss">
.box1 {
  position: absolute;
}
.motai {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 22;
  align-items: center;
  background-color: rgba(30, 30, 30, 0.6);
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 1s;
  animation-name: zoom;
  animation-duration: 0.6s;
  display: none;

  img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
  }
}

@keyframes zoom {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}
.cover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  &:hover {
    transition: all 0.5s;
    opacity: 1;
  }
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
}
.imgBox {
  // width: 200px;
  // height: 200px;
width: 100%;
height: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>